<template>
  <div class="talkabout">
    <div class="top">
      <div class="back iconfont icon-fanhui" @click.stop="back"></div>
      <div class="pinlun">评论</div>
      <div class="fenxiang">分享</div>
    </div>
    <div class="xilie">
      <div class="xilie_left bold">评论区</div>
      <div class="xilie_right">
        <div class="bold">推荐</div>
        <div>最热</div>
        <div>最新</div>
      </div>
    </div>
    <ul>
      <talklist v-for="item in talkitem['comments']" :key="item.commentId" :item="item"></talklist>
    </ul>
  </div>
</template>

 <script>
 import talklist from "@/components/talk_list.vue"
export default {
  name: "talk",
  props: ["id"],

  data(){
    return{
      talkitem:{}
    }
    
  },
  created() {
    console.log(this.id);
    console.log("//////////", this.$route);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.$http.get("/comment/playlist", {
      params: {
        id: this.id,
      },
    }).then(res=>{
      this.talkitem=res.data;
      console.log(this.talkitem);
    });
  },
  components:{
    talklist
  }
};
</script>

<style lang="less" scoped>
.talkabout {
  padding: 0px 10px;
  .top {
    width: 100%;
    height: 40px;
    .back{
      margin-left: 0px;
      width: 20px;
      height: 20px;
      font-size: 20px;
    }
    .pinlun{
      font-size: 20px;
    }
    div {
      float: left;
      margin: 10px;
    }
    .fenxiang {
      float: right;
    }
  }
  .xilie {
    padding: 0px 10px 0px 10px;
    display: flex;
    // justify-content: center;
    width: 100%;
    height: 40px;
    .xilie_left{
      color: black;
       font-weight: bold;
    }
    .xilie_right {
      // flex: 0.5;
      margin-left: 10rem;
      line-height: 40px;
      float: right;
     div{
       margin:0px 10px;
       color: rgba(0, 0, 0, 0.5);
     }
     .bold{
       color: black;
       font-weight: bold;
     }
    }
    div {
      
      flex: 1;
      line-height: 40px;
      height: 40px;
      float: left;
    }
  }
  ul {
    width: 100%;
    // margin: 0px 10px 0px 10px;
  }
}
</style>